<template>
    <div class="app-container">
        <el-row >
            <el-col >
                <div class="head-container">
                    <el-input v-model="keyWord"  clearable placeholder="输入任务名称/任务分组/Corn表达式搜索" style="width: 320px;" class="filter-item"></el-input>
                    <el-date-picker
                        v-model="date"
                        type="daterange"
                        range-separator=":"
                        class="el-range-editor--small filter-item"
                        style="height: 30.5px;width: 220px;"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                    </el-date-picker>
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </div>
                    <!-- 新增 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="handleAdd(null,'add')">新增</el-button>
                    </div>
                    <!-- 导出 -->
                    <div style="display: inline-block;margin: 0px 0px 0px 2px;">
                        <el-button class="filter-item" size="mini" type="warning" icon="el-icon-download">导出</el-button>
                    </div>
                </div>
            </el-col>   
        </el-row>
        <div>
            <el-table v-loading="tableLoading" border :data="tableData" size="small" style="width: 100%;">
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column prop="jobName" label="任务名称" />
                <el-table-column prop="jobGroup" label="任务分组" />
                <el-table-column prop="jobClassName" label="执行类" width="350px"/>
                <el-table-column prop="cronExpression" label="corn表达式" />
                <el-table-column prop="remark"  label="描述" show-overflow-tooltip/>
                <el-table-column label="状态" align="center" width="100px">
                    <template slot-scope="scope">
                        <div v-if="scope.row.triggerState === 'RUNNING'">
                            <el-tag size="samll" type="success">运行中</el-tag>
                        </div>
                        <div v-else-if="scope.row.triggerState === 'PAUSED'">
                            <el-tag size="samll" type="warning">已暂停</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="150px"/>
                <el-table-column label="操作" width="190" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleAdd(scope.row,'edit')" >编辑</el-button>
                        <el-button type="text" @click="handleRun(scope.row.id)" v-show="scope.row.triggerState === 'PAUSED'">启动</el-button>
                        <el-button type="text" @click="handlePause(scope.row.id)" v-show="scope.row.triggerState === 'RUNNING'">暂停</el-button>
                        <el-popover :ref="scope.row.id" placement="top" width="180">
                            <p>确定删除本条数据吗？</p>
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()" >取消</el-button>
                                <el-button :loading="delLoading" type="primary" size="mini" @click="delCommit(scope.row)">确定</el-button>
                            </div>
                            <el-button slot="reference" type="text" style="color:red">删除</el-button>
                        </el-popover> 
                    </template>
                </el-table-column>
            </el-table>
                <!--分页组件-->
            <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange" 
                :current-page="currentPage" 
                :page-sizes="[10, 20, 50, 100]" 
                :page-size="pageSize" 
                layout="total, sizes, prev, pager, next, jumper" 
                :total="total">
            </el-pagination>
        </div>
        <div>
            <job-add-and-edit ref="jobAddAndEdit"></job-add-and-edit>
            <job-info ref="jobInfo"></job-info>
        </div>
    </div>
</template>
<script>
import { parseTime } from '@/utils/index'
import { queryJob,delJob,editJob,pauseJob,resumeJob } from "@/api/job"
import pageHelp         from "@/mixins/pageHelp";
import AddAndEdit from '@/views/systools/job/dialog/AddAndEdit'
import JobInfo from '@/views/systools/job/dialog/JobInfo'
export default {
    name: "Job",
    // 设置数据字典
    mixins:[pageHelp],
    components:{
        'job-add-and-edit':AddAndEdit,  //新增/编辑任务组件
        'job-info':JobInfo  //查看任务组件
    },
    data() {
        return{
            date:[],
            keyWord     : '',//查询关键字
            tableData   : [],
            tableLoading: false,
            delLoading:false
        }
    },
    created(){
        this.getData()
    },
    methods:{
        getData(){
            //调用获取任务api
            this.apiQueryJob()
        },
        //删除任务
        delCommit(row){
            this.apiDelJobById(row.id)
        },
        handleAdd(row,type){
            let isAdd = (type === 'add'? true:false)
            this.$nextTick(()=>{
                this.$refs.jobAddAndEdit.init(row,isAdd)
            })
        },
        handleView(row){
            this.$nextTick(()=>{
                this.$refs.jobInfo.init(row)
            })
        },
        handleRun(id){
            this.apiRunJob(id)
        },
        handlePause(id){
            this.apiPauseJob(id)
        },
        search(){
            this.apiQueryJob()
        },
        //翻页查询
        pageQuery(){
            this.apiQueryArticle()
        },
        
        //==========>请求api接口<==========//
        //查询任务集合api
        apiQueryJob(){
            //管理员查询接口
            this.tableLoading =true
            let params = {
                pageNum : this.pageNum,
                pageSize: this.pageSize,
            }
            !!this.keyWord.trim() && (params.keyWord = this.keyWord)
            !!this.date && (this.date.length !==0) && (params.date = this.date.join(','))
            queryJob(params).then(res=>{
                if(res.code ===200){
                    this.tableData    = res.data.list
                    this.total        = res.data.total
                    this.tableLoading = false
                }
            }).catch((err)=>{
                this.tableLoading = false
            })
        },
        //通过任务id删除任务
        apiDelJobById(id){
            //管理员删除接口
            this.delLoading =true
            delJob(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.delLoading = false
                    this.$refs[id].doClose()
                    this.apiQueryJob()
                }
            }).catch((err)=>{
                this.$refs[id].doClose()
                this.delLoading = false
            })
        },
        //更新任务
        apiEditJob(admin){
            //管理员删除接口
            editJob(admin).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.apiQueryJob()
                }
            }).catch((err)=>{
            })
        },
        //启动任务
        apiRunJob(id){
            resumeJob(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.apiQueryJob()
                }
            }).catch((err)=>{
            })
        },
        //暂停任务
        apiPauseJob(id){
            pauseJob(id).then(res=>{
                if(res.code ===200){
                    this.$message.success(res.message)
                    this.apiQueryJob()
                }
            }).catch((err)=>{
            })
        },
        //==========>请求api接口<==========//
    }
        
}
</script>
<style scoped>
</style>